<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="mb-0">题目列表</h4>
        <div>
            <select id="categoryFilter" class="form-select">
                <option value="">所有分类</option>
            </select>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>题目</th>
                        <th>分类</th>
                        <th>难度</th>
                        <th>类型</th>
                        <th>练习次数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="questionList">
                    <!-- 题目列表将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center" id="pagination">
                <!-- 分页将通过JavaScript动态加载 -->
            </ul>
        </nav>
    </div>
</div>

<script>
$(document).ready(function() {
    var currentPage = 1;
    var pageSize = 10;
    var selectedCategory = '';

    // 加载分类列表
    function loadCategories() {
        $.get('/quiz_system/api/category/list', function(response) {
            if (response.code === 200) {
                var categories = response.data;
                var options = '<option value="">所有分类</option>';
                categories.forEach(function(category) {
                    options += '<option value="' + category.id + '">' + category.categoryName + '</option>';
                });
                $('#categoryFilter').html(options);
            }
        });
    }

    // 加载题目列表
    function loadQuestions(page) {
        var params = {
            page: page,
            size: pageSize
        };
        if (selectedCategory) {
            params.categoryId = selectedCategory;
        }

        $.get('/quiz_system/question/api/list', params, function(response) {
            if (response.code === 200) {
                var questions = response.data.list;
                var total = response.data.total;
                var html = '';

                questions.forEach(function(question) {
                    html += '<tr>';
                    html += '<td>' + question.id + '</td>';
                    html += '<td>' + question.title + '</td>';
                    html += '<td>' + question.categoryName + '</td>';
                    html += '<td>' + getDifficultyLabel(question.difficulty) + '</td>';
                    html += '<td>' + (question.isMultiple ? '多选' : '单选') + '</td>';
                    html += '<td>' + (question.practiceCount || 0) + '</td>';
                    html += '<td>';
                    html += '<a href="/quiz_system/question/detail/' + question.id + '" class="btn btn-sm btn-primary">答题</a> ';
                    html += '</td>';
                    html += '</tr>';
                });

                $('#questionList').html(html);
                updatePagination(page, Math.ceil(total / pageSize));
            }
        });
    }

    // 更新分页
    function updatePagination(currentPage, totalPages) {
        var html = '';
        if (totalPages > 1) {
            html += '<li class="page-item ' + (currentPage === 1 ? 'disabled' : '') + '">';
            html += '<a class="page-link" href="#" data-page="' + (currentPage - 1) + '">上一页</a></li>';

            for (var i = 1; i <= totalPages; i++) {
                html += '<li class="page-item ' + (i === currentPage ? 'active' : '') + '">';
                html += '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
            }

            html += '<li class="page-item ' + (currentPage === totalPages ? 'disabled' : '') + '">';
            html += '<a class="page-link" href="#" data-page="' + (currentPage + 1) + '">下一页</a></li>';
        }
        $('#pagination').html(html);
    }

    // 获取难度标签
    function getDifficultyLabel(difficulty) {
        switch(difficulty) {
            case 1: return '<span class="badge bg-success">简单</span>';
            case 2: return '<span class="badge bg-warning">中等</span>';
            case 3: return '<span class="badge bg-danger">困难</span>';
            default: return '<span class="badge bg-secondary">未知</span>';
        }
    }

    // 绑定事件
    $('#categoryFilter').on('change', function() {
        selectedCategory = $(this).val();
        currentPage = 1;
        loadQuestions(currentPage);
    });

    $(document).on('click', '.pagination .page-link', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        if (page > 0) {
            currentPage = page;
            loadQuestions(currentPage);
        }
    });

    // 初始化
    loadCategories();
    loadQuestions(currentPage);
});
</script>
